<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>产品维护</title>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link href="css/jquery.datetimepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="css/admin.css"/>

    <link rel="stylesheet" type="text/css" href="css/paging.css">

    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
    <!--[if lt IE 10]>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-placeholder/2.0.8/jquery.placeholder.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="gray_bg"></div>
<!-- 编辑分类开始 -->
<div id="editDiadog" class="diadog">
    <div class="diadog-tit">
        <div class="row">
            <div class="col-md-11" id="diadogTitle"><span>编辑分类</span></div>
            <div class="col-md-1 close"><span>×</span></div>
        </div>
    </div>
    <div class="diadog-con">
        <div class="form-horizontal" role="form">
            <div class="form-group">
                <label for="inputPassword3" class="col-md-3 control-label">分类名称:</label>
                <div class="col-sm-9">
                    <input id="typeName" type="text" class="form-control" style="display: inline">
                    <label class="control-label" style="display: inline">(不得超过13字)</label>
                </div>

            </div>

            <div class="form-group" id="uploadImg">
                <label for="inputPassword3" class="col-md-3 control-label"><span
                        style="color: #e4393c">*</span>分类图标:</label>
                <div class="col-sm-4">
                    <button style="margin-bottom: 5px; margin-left: 0px" type="button" class="btn btn-default">上传图片
                    </button>
                    <input style="width:300px !important;height:60px !important;position: absolute !important;z-index: 100 !important;filter:alpha(opacity=0)!important;-moz-opacity:0 !important;-khtml-opacity:0 !important; opacity: 0 !important;top:0px; !important;cursor: pointer; left: 0px !important;"
                           id="pickfiles" type="file" class="form-control">
                    <input id="avatar" type="hidden" class="form-control">
                </div>
                <label class="control-label">(宽:30px，高:30px)</label>
            </div>
            <div class="form-group" id="imageShow">
                <label for="inputPassword3" class="col-md-3 control-label">图片:</label>
                <span class="col-sm-2" style=" color: #000; margin-top: 15px;"><img id="imgName"
                                                                                    style="width: 80px;height: 80px;"></span>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-md-3 control-label">分类描述:</label>
                <div class="col-sm-9">
                    <!--<input id="description" type="text" class="form-control" maxlength="50">-->
                    <textarea name=""id="description" cols="33" rows="5" style="resize:none;"></textarea>
                    <span class="wordwrap"><var class="word" style="color: red">50</var>/<var class="max">50</var></span>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-md-3 control-label">分类说明:</label>
                <div class="col-sm-9">
                    <!--<input id="remark" type="text" class="form-control" maxlength="100">-->
                    <textarea name=""id="remark" cols="33" rows="7" style="resize:none;"></textarea>
                    <span class="wordwrap"><var class="word" style="color: red">100</var>/<var class="max">100</var></span>
                </div>
            </div>
            <div class="form-group" id="sort">
                <label for="inputPassword3" class="col-md-3 control-label">修改排序:</label>
                <div class="col-sm-9">
                    <input id="sortIndex" type="text" class="form-control">
                </div>
            </div>
            <div class="form-group" id="btn">
                <div class="col-sm-offset-3 col-sm-9">
                    <button id="saveClass" type="submit" class="btn btn-danger">保存</button>
                    <button id="editClass" type="submit" class="btn btn-danger">保存</button>
                    <button id="editSortIndex" type="submit" class="btn btn-danger">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑分类结束 -->
<!-- 删除分类开始 -->
<div id="deleteDiadog" class="diadog">
    <div class="diadog-tit">
        <div class="row">
            <div class="col-md-11"><span id="delTitle">确定禁用该分类？</span></div>
            <div class="col-md-1 close"><span>×</span></div>
        </div>
    </div>
    <div class="diadog-con" style="padding:30px 0">

        <div class="form-horizontal" role="form">
            <div class="row">
                <div class="col-md-12"></div>

                <div class="form-group" style="text-align: center;">
                    <div class="col-md-1"></div>
                    <div class="col-md-2">
                        <button id="enableSure" type="submit" class="btn btn-primary">确 定</button>
                    </div>
                    <div class="col-md-2">
                        <button id="btn-default" type="submit" class="btn btn-default">取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 删除分类结束 -->
<!-- header start -->
<div id="header" class="header">

</div>
<!-- header end -->
<!-- usercenter start -->
<div class="usercotent">
    <div id="center-left"></div>
    <div class="usercotentr floatr">
        <div class="user-tit" style="margin-bottom:10px">
            <h3>产品维护</h3>
        </div>
        <div class="usercotent-con">
            <div class="col-md-12">
                <button type="button" class="btn btn-info">产品大类</button>
                <button id="addCategory" type="button" class="btn btn-danger pull-right">添加分类</button>
            </div>


            <div class="down">
                <table id="testMyGrid" class="table table-bordered table-hover"></table>
            </div>
            <!-- page start -->
            <nav class="totalpage floatr">
                <span>总共</span><strong id="totalpage"></strong><span>条</span>
                <div id="pageTool" style="margin-top:20px;"></div>
            </nav>
            <div class="clear"></div>
            <!-- page end -->
        </div>

    </div>
    <div class="clear"></div>
</div>

<!-- usercenter end -->

<!-- footer start -->
<div class="footer">
    <div class="bot">
        <p style="padding-top: 10px; text-align: center">Copyright (C) 都能印 2014-2016, all Rights Reserved |
            豫ICP备14024464号-1 | 增值电信业务经营许可证：豫B2-20150019</p>
        <p class="authentication" style="padding-bottom: 10px; padding-top: 10px;">
            <img src="img/footer1.png" alt="">
            <img src="img/footer2.png" alt="">
            <img src="img/footer3.png" alt="">
            <img src="img/footer4.png" alt="">
            <img src="img/footer5.png" alt="">
        </p>
    </div>
</div>
<!-- footer end -->
<script src="js/jquery.min-1-11-3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/myDataGrid.js"></script>
<script src="js/widget/admin.js"></script>
<script type="text/javascript" src="js/query.js"></script>
<script type="text/javascript" src="js/paging.js"></script>
<script type="text/javascript" src="bower_components/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/qiniu.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript">
    var id;
    //开始
    $(function () {
        initSideAccMenu("产品管理", "产品维护");
//        获取数据

        $("#testMyGrid").grid({
            id: "testMyGrid",
            pageTotalId: "totalpage",
            pageToolId: "pageTool",
            url: "apis/product/getproductbigtypepagelist",
            columns: [
                {field: 'idOrder', title: '#', conmethod: 'getRecordIndex', calcfield: '', kind: '', region: 0},
                {field: 'typeName', title: '类型名称', conmethod: 'getNullStr', calcfield: '', kind: '', region: 0},
                {field: 'icon', title: '图标', conmethod: 'getIcon', calcfield: '', kind: '', region: 1},
                {field: 'sortIndex', title: '排序', conmethod: 'getNullNumber', calcfield: '', kind: '', region: 0},
                {field: 'description', title: '分类描述', conmethod: 'getNullStr', calcfield: '', kind: '', region: 0},
                {field: 'opt', title: '操作', conmethod: 'getUserOptURL', calcfield: '', kind: '', region: 1}
            ],
            pagesize: 10
        });
    });
    //  获取图标
    function getIcon() {
        var user = arguments[1];
        var shtml = "";
        if(user.icon == null || user.icon == ""){
            shtml = "<img style='width: 80px;height: 80px'>"
        }else{
            shtml += "<img src='" + user.icon + "' style='width: 80px;height: 80px'>"
        }

        return shtml;
    }
    //    操作
    function getUserOptURL() {
        var user = arguments[1];
        var shtml = "";
        if (user.enable == 1) {
            shtml += "<a href='product-smType.html?id="+user.id+"&typeName="+escape(user.typeName)+"'>分类内容</a>";
            shtml += "&nbsp&nbsp&nbsp";
            shtml += "<a onclick=\"toEdit(" + user.id + ",'" + user.typeName + "','" + user.icon + "','" + user.description + "','" + user.remark + "')\"" + " href=\"javascript:;\">编辑</a>";
            shtml += "&nbsp&nbsp&nbsp";
            shtml += "<a onclick=\"toEditsortIndex(" + user.id + "," + user.sortIndex + ")\"" + " href=\"javascript:;\">修改排序</a>";
            shtml += "&nbsp&nbsp&nbsp";
            shtml += "<a onclick=\"toEnable(" + user.id + ",0)\"" + " href=\"javascript:;\">禁用</a>";
        } else {
            shtml += "<a style='color: red' deptname=\"" + user.deptname + "\">已禁用</a>";
            shtml += "&nbsp&nbsp&nbsp&nbsp";
            shtml += "<a onclick=\"toEnable(" + user.id + ",1)\">点击启用</a>";
        }
        return shtml;
    }
    //    编辑
    var bigTypeID;
    function toEdit(id, typename, icon, description, remark) {
        bigTypeID = id;

        $("#gray_bg").show();
        $("#gray_bg").css({"height": $(document).height()});
        $("#editDiadog").show();
        $("#editDiadog").center();
        $("#saveClass").hide();
        $("#editClass").show();

        $("#sort").siblings().show();
        $("#sort").hide();
        $("#editSortIndex").hide();

        if (description == null || description == "undefined" || description == "") {
            var desText = "";
        } else {
            var desText = description;
        }
        if (remark == null || remark == "undefined" || remark == "") {
            var remText = "";
        } else {
            var remText = remark;
        }
        $("#typeName").val(typename);
        $("#avatar").val(icon);
        $("#imgName").attr('src', icon);
        $("#description").val(desText);
        $("#remark").val(remText);

        var remLength = $("#remark").val().length;
        if(remLength == 0){
            $("#remark").siblings().children(".word").text("100");
        }else{
            $("#remark").siblings().children(".word").text($("#remark").siblings().children(".max").text() - remLength);
        }
        var desLength = $("#description").val().length;
        if(desLength == 0){
            $("#description").siblings().children(".word").text("50");
        }else{
            $("#description").siblings().children(".word").text($("#description").siblings().children(".max").text() - desLength);
        }
    }
    $("#editClass").click(function () {
        if ($("#typeName").val() == "") {
            alert("分类名称不能为空");
            return;
        }
        if ($("#icon").val() == "") {
            alert("图标不能为空");
            return;
        }
        var data = {
            id: bigTypeID,
            typeName: $("#typeName").val(),
            icon: $("#avatar").val(),
            description: $("#description").val(),
            remark: $("#remark").val()
        }

        $.ajax({
            url: "apis/product/updateproducttype",
            type: 'post',
            data: {
                "productType": JSON.stringify(data)
            },
            dataType: 'json',
            success: function (data, status, xhr) {
                if (data.httpCode == 200) {
                    $("#gray_bg").hide();
                    $("#editDiadog").hide();
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });

    });
    //    修改排序
    function toEditsortIndex(id, index) {
        bigTypeID = id;
        $("#gray_bg").show();
        $("#gray_bg").css({"height": $(document).height()});
        $("#editDiadog").show();
        $("#editDiadog").center();
        $("#diadogTitle").html("修改排序")

        $("#sort").show();
        $("#sort").siblings().hide();
        $("#btn").show();
        $("#saveClass").hide();
        $("#editClass").hide();
        $("#editSortIndex").show();
        $("#sortIndex").val(index);
    }
    $("#editSortIndex").click(function () {
        if ($("#sortIndex").val() == "") {
            alert("排序不能为空");
            return;
        }
        if (isNaN($("#sortIndex").val())) {
            alert("请输入数字");
            return;
        }
        var data = {
            id: bigTypeID,
            sortIndex: $("#sortIndex").val()
        };
        var url = "apis/product/updateproducttypesort";
        $.ajax({
            url: url,
            type: 'post',
            data: {
                "productType": JSON.stringify(data)
            },
            dataType: 'json',
            success: function (data, status, xhr) {
                if (data.httpCode == 200) {
                    $("#gray_bg").hide();
                    $("#editDiadog").hide();
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });
    })
    //    禁用
    var enable;
    function toEnable(id, e) {
        bigTypeID = id;
        enable = e;
        $("#gray_bg").show();
        $("#gray_bg").css({"height": $(document).height()});
        $("#deleteDiadog").show();
        $("#deleteDiadog").center();
        if (e == 1) {
            $("#delTitle").html("确定启用该分类？");
        } else {
            $("#delTitle").html("确定禁用该分类？");
        }
    }
    $("#enableSure").click(function () {
        var data = {
            id: bigTypeID,
            enable: enable
        };
        var url = "apis/product/updateproducttypeenable";
        $.ajax({
            url: url,
            type: 'post',
            data: {
                "productType": JSON.stringify(data)
            },
            dataType: 'json',
            success: function (data, status, xhr) {
                if (data.httpCode == 200) {
                    $("#gray_bg").hide();
                    $("#deleteDiadog").hide();
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });
    })
    //    添加分类
    $("#addCategory").click(function () {
        $("#description").siblings().children(".word").text("50");
        $("#remark").siblings().children(".word").text("100");

        $("#gray_bg").show();
        $("#gray_bg").css({"height": $(document).height()});
        $("#editDiadog").show();
        $("#editDiadog").center();
        $("#saveClass").show();
        $("#editClass").hide();

        $("#sort").siblings().show();
        $("#sort").hide();
        $("#editSortIndex").hide();
    })
    $("#saveClass").click(function () {
        if ($("#typeName").val() == "") {
            alert("分类名称不能为空");
            return;
        }
        if ($("#icon").val() == "") {
            alert("图标不能为空");
            return;
        }
        var typeName = $("#typeName").val();
        var icon = $("#avatar").val();
        var description = $("#description").val();
        var remark = $("#remark").val();
        var data = {
            parentId: 0,
            typeName: typeName,
            icon: icon,
            description: description,
            remark: remark
        }

        $.ajax({
            url: "apis/product/addproducttype",
            type: 'post',
            data: {
                "productType": JSON.stringify(data)
            },
            dataType: 'json',
            success: function (data, status, xhr) {
                if (data.httpCode == 200) {
                    $("#gray_bg").hide();
                    $("#editDiadog").hide();
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            }
        })
    })
//    字数统计
    $("textarea").click(function () {
        var max = $(this).siblings().children(".max").text();
        $(this).attr("maxlength",max);
        $(this).on('input propertychange', function () {
            var _value = $(this).val().replace(/\n/gi,"");
            $(this).siblings().children(".word").text(max - _value.length);
        });
        }
    )
    //垂直居中
    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
        return this;
    }
    $(".close,#btn-default").click(function () {
        $("#gray_bg").hide();
        $("#editDiadog").hide();
        $("#deleteDiadog").hide();

        $("#typeName").val("");
        $("#avatar").val("");
        $("#description").val("");
        $("#remark").val("");
        $("#imgName").removeAttr("src");
    })
</script>
</body>
</html>